<template>
    <rx-layout :leftStyle="{width:'230px'}">
        <template #left>
            <rx-category-treeeditor
                cat-key="BPM"
                :statisticConfig="statisticConfig"
                read-key="task.read"
                :edit="false"
                @handSelect="handSelect"
                :treeRootList="treeRootList"
                :isBpmClient="isBpmClient"
                :isMyBpm="isMyBpm"
                :async="true">
            </rx-category-treeeditor>
        </template>
        <template #middle>
            <div style="padding: 10px;width: 100%;height: 100%">
                <rx-fit v-model="fitSearch">
                    <template #head>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div class="table-operator">
                                {{i18n('list.completeItem','我的已办')}}
                            </div>
                            <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                        </div>
                    </template>
                    <template #search>
                        <a-form layout="vertical">
                            <a-form-item :label="i18n('form.itemTitle','事项标题')">
                                <a-input :placeholder="i18n('form.itemTitle','事项标题','input')"
                                         v-model:value="urlConfig.queryParam['Q_SUBJECT__S_LK']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('form.billNo','单号')">
                                <a-input :placeholder="i18n('form.billNo','单号','input')"
                                         v-model:value="urlConfig.queryParam['BILL_NO_']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('list.taskName','任务名称')">
                                <a-input :placeholder="i18n('list.taskName','任务名称','input')"
                                         v-model:value="urlConfig.queryParam['Q_NODE_NAME__S_LK']"/>
                            </a-form-item>
                            <a-form-item :label="i18n('list.taskCreateTime','创建时间') + i18n('list.from','从')" @mousedown.stop>
                                <a-date-picker
                                    :locale="locale"
                                    :getPopupContainer="getPopupContainer"
                                    style="width: 100%"
                                    v-model:value="urlConfig.queryParam['Q_CREATE_TIME__D_GE']"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    :placeholder="i18n('list.taskCreateTime','请输入任务创建时间','input')"
                                />
                            </a-form-item>
                            <a-form-item :label="i18n('list.to','至')" @mousedown.stop>
                                <a-date-picker
                                    :locale="locale"
                                    :getPopupContainer="getPopupContainer"
                                    style="width: 100%"
                                    :placeholder="i18n('list.taskCreateTime','请输入任务创建时间','input')"
                                    v-model:value="urlConfig.queryParam['Q_CREATE_TIME__D_LE']"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </a-form-item>
                        </a-form>
                        <div class="list-search-toolbar">
                            <a-button type="primary" @click="search">
                                <SearchOutlined/>
                                {{ $ti18('rxList.searchBtn', '查询') }}
                            </a-button>
                            <a-button style="margin-left: 4px" @click="resetSearch">
                                <RedoOutlined />
                                {{ $ti18('rxList.resetBtn', '重置') }}
                            </a-button>
                        </div>
                    </template>
                    <template #middle>
                        <rx-grid ref="table"
                                 :hasPage="true"
                                 :urlConfig="urlConfig"
                                 :selectConfig="selectConfig"
                                 url="/api-bpm/bpm/core/bpmCheckHistory/getMyApproved"
                                 field="hisId"
                                 :columns="columns"
                        >
                            <template #duration="{row}">
                                {{ row.duration?filterDuration(row.duration):"" }}
                            </template>
                            <template #completeTime="{row}">
                                {{row.completeTime}}
                            </template>
                            <template #jumpType="{row}">
                                <a-tag :color="opinionMap[row.jumpType]? opinionMap[row.jumpType].color:''">
                                    <span>{{ opinionMap[row.jumpType].text }}</span>
                                </a-tag>
                            </template>
                            <template #action="{ row }">
                                <RxGridAction :size="2">
                                    <span><a @click="instDetail(row)" :title="$ti18('rxList.detailBtn', '明细')">{{ $ti18('rxList.detailBtn', '明细') }}</a></span>
                                    <span><a @click="transferTo(row)" :title="i18n('option.forward', '转发')">{{ i18n('option.forward', '转发') }}</a></span>
                                </RxGridAction>
                            </template>
                        </rx-grid>
                    </template>
                </rx-fit>
            </div>
        </template>
    </rx-layout>
</template>


<script>
import {RxLayout, RxLangInput, RxFit,BaseList,Util} from '@lowcode/jpaas-base-lib';
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js"
import { App } from '@lowcode/jpaas-share-component';
import TaskBatApprove from "@/views/modules/bpm/ws/TaskBatApprove.vue";
import userUser from "@/stores/userUser";
import { mapState } from 'pinia';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import instAndTaskShare from "@/views/modules/column/processOverview/instAndTaskShare.js";
import  rxCategoryTreeeditor from "@/views/modules/column/processOverview/rx-category-treeeditor.vue"
import BpmInstTransfer from '@/views/modules/bpm/components/BpmInstTransfer.vue'
export default {
    name: "MyBpmApprovedTasks",
    components: {RxLayout, RxFit, RxLangInput,rxCategoryTreeeditor},
    mixins: [BaseList,App,FlowUtil,instAndTaskShare],
    computed:{
        ...mapState(userUser, ['user'])
    },
    data() {
        return {
            locale,
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            columns: [
                {
                    title: this.i18n('form.itemTitle', '事项标题'),
                    field: 'subject',
                    minWidth: 180,
                },
                {
                    title: this.i18n('form.billNo', '单号'),
                    field: 'billNo',
                    minWidth: 140,
                },
                {
                    title: this.i18n('form.nodeName', '节点'),
                    field: 'nodeName',
                    width: 100,
                },
                {
                    title: this.i18n('form.duration', '持续时间'),
                    field: 'duration',
                    width: '100px',
                    slots: { default: 'duration' },
                },
                {
                    title: this.i18n('form.type', '类型'),
                    field: 'jumpType',
                    width: 100,
                    align:'center',
                    slots: { default: 'jumpType' },
                },
                {
                    title: this.i18n('form.completeTime', '完成时间'),
                    field: 'completeTime',
                    width: 150,
                    slots: { default: 'completeTime' },
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    field: 'action',
                    width: 130,
                    allowCellEdit: false,
                    slots: {default: 'action'},
                },
            ],
            opinionMap: {
                SUBMIT: {color: 'green', text: this.i18n('option.submit', '提交')},
                AGREE: {color: 'green', text: this.i18n('option.pass', '通过')},
                SKIP: {color: 'red', text: this.i18n('option.skip', '跳过')},
                RECOVER: {color: 'red', text: this.i18n('option.withdraw', '撤回')},
                INVOKE_TO_STARTOR: {color: 'red', text: this.i18n('option.withdrawToStartor', '撤回(发起人)')},
                REFUSE: {color: 'red', text: this.i18n('option.oppose', '反对')},
                RUNNING: {color: 'green', text: this.i18n('option.run', '运行')},
                SUPSPEND: {color: 'red', text: this.i18n('option.suspend', '暂停')},
                CANCEL: {color: 'red', text: this.i18n('option.cancel', '作废')},
                LINKUP: {color: 'red', text: this.i18n('option.communicate', '沟通')},
                COMMUNICATE: {color: 'red', text: this.i18n('option.communicate', '沟通')},
                //REPLY_COMMUNICATE: { color: 'red', text: '回复沟通' },
                BACK: {color: 'red', text: this.i18n('option.reject', '驳回')},
                BACK_TO_STARTOR: {color: 'red', text: this.i18n('option.rejectPromoter', '驳回到发起人')},
                OVERTIME_AUTO_AGREE: {color: 'red', text: this.i18n('option.timeoutApproval', '超时审批')},
                TIMEOUT_SKIP: {color: 'red', text: this.i18n('option.timeoutSkip', '超时跳过')},
                CANCEL_COMMUNICATE: {color: 'red', text: this.i18n('option.cancelCommunicate', '取消沟通')},
                BACK_SPEC: {color: 'red', text: this.i18n('option.rejectNode', '驳回节点')},
                BACK_GATEWAY: {color: 'red', text: this.i18n('option.rejectGateway', '驳回网关')},
                ABSTAIN: {color: 'red', text: this.i18n('option.abstention', '弃权')},
                BACK_CANCEL: {color: 'red', text: this.i18n('option.rejectCancel', '驳回撤销')},
                RECOVER_CANCEL: {color: 'red', text: this.i18n('option.toWithdraw', '撤回撤销')},
                TRANSFER: {color: 'red', text: this.i18n('option.transfer', '转办')},
                INTERPOSE: {color: 'red', text: this.i18n('option.intervention', '干预')},
                LIVE: {color: 'red', text: this.i18n('option.revive', '复活')},
                ROAM_TRANSFER: {color: 'red', text: this.i18n('option.flow', '流转')},
                TRANS: {color: 'red', text: this.i18n('option.forward', '转发')},
                TRANS_REPLY: {color: 'red', text: this.i18n('option.replyForward', '回复转发')},
                PENDING: {color: 'blue', text: this.i18n('option.pending', '挂起')},
                RESTORE: {color: 'green', text: this.i18n('option.restore', '恢复')},
            },
            treeRootList:[],
            statisticConfig: {
                type: "static_bpm",
                table: "BPM_CHECK_HISTORY",
                field: "TREE_ID_",
                whereConf: [{
                    name: "HANDLER_ID_",
                    type: "string",
                    dateFormat: "",
                    op: "=",
                    value: "curUserId",
                    valueType: "context"
                },
                    {
                        name: "TENANT_ID_",
                        type: "string",
                        dateFormat: "",
                        op: "=",
                        value: "curTenantId",
                        valueType: "context"
                    }
                ]
            },
            readType:"task",
            isBpmClient:false,
            isMyBpm:true,
        }
    },
    created() {
        this.urlConfig.queryParam = {};
        //this.urlConfig.queryParam["Q_CREATE_BY__S_EQ"]=this.user.userId;
        let appId=this.curApp.appId;
        if(appId){
            this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"MyApprovedTasks",key);
        },
        handleTask(record) {
            this.openInst(record.appId,record.instId,record.taskId);
        },
        resetSearch() {
            this.urlConfig.queryParam = {};
            //this.urlConfig.queryParam["Q_CREATE_BY__S_EQ"]=this.user.userId;
            let appId=this.curApp.appId;
            if(appId){
                this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
            }
            this.$nextTick(() => {
                this.$refs['table'].loadData();
            })
        },
        getPopupContainer(p){
            return p.parentNode ;
        },
        handSelect(curRow) {
            this.loadDataBySelectTreeNode(curRow);
        },
        instDetail(record) {
            this.openDetail(record.appId, record.instId, "mydone");
        },
        transferTo(record) {
            var instId = record.instId;
            Util.open({
                component: BpmInstTransfer,
                curVm: this,
                widthHeight: ['800px', '500px'],
                title: this.i18n('list.forwardTitle', '转发流程实例') + record.subject,
                data: {
                    instId: record.instId,
                    send: true
                },
            }, function (action) {

            })
        },
        filterDuration(duration) {
            return Util.getDuration(duration)
        },
    },
    watch: {},
}
</script>

<style scoped>

</style>
